<style type="text/css">

    .ticker {
        height: 200px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;

    }
    #ticker_02 {
        height: 200px;
    }
    .ticker li {
        height: 30px;
        border-bottom: 1px dotted #DDD;
        padding: 5px;
        margin: 0px 5px;
    }
</style>

<div class="panel panel-default">
    <div class="panel-heading">Tin Tức Mới</div>
    <div class="panel-body">
        <ul id="ticker_02" class="ticker">
            <?php
            $bai_viet = new Bai_viet();
            $bai_viets = $bai_viet->get_all_tittle();
            foreach ($bai_viets as $bai_viets) {
                ?>
                <li>
                    <a href="<?php echo asset('news/' . $bai_viets->id); ?>">
                        <?php
                        $str = $bai_viets->tieu_de;
                        $length = 22;
                        $minword = 3;
                        $sub = '';
                        $len = 0;
                        foreach (explode(' ', $str) as $word) {
                            $part = (($sub != '') ? ' ' : '') . $word;
                            $sub .= $part;
                            $len += strlen($part);
                            if (strlen($word) > $minword && strlen($sub) >= $length) {
                                break;
                            }
                        }
                        echo $sub . (($len < strlen($str)) ? ' ...' : '');
                        ?> </a>
                </li>
                    <?php } ?>
        </ul>
    </div>

</div>

<script type="text/javascript">
    function tick2() {
        $('#ticker_02 li:first').slideUp(function() {
            $(this).appendTo($('#ticker_02')).slideDown();
        });
    }
    setInterval(function() {
        tick2()
    }, 1000);
</script>